import React, { useRef } from "react"
import "./index.css"

interface TodoHeaderProps {
  addTodoEvent: (todoName: string) => void
}

export let template: any

const TodoHeader: React.FC<TodoHeaderProps> = ({ addTodoEvent }) => {
  const todoNameRef = useRef<HTMLInputElement>(null)
  const addTodo = () => {
    const todoName = todoNameRef.current!.value
    if (todoName.trim() === "") return
    addTodoEvent(todoName)
    todoNameRef.current!.value = ""
  }
  template = (
    <header>
      <input type="text" ref={todoNameRef} />
      <button onClick={addTodo}>添加</button>
    </header>
  )
  return template
}

export default TodoHeader
